<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CMS</title>
    <link href="__CSS__/common.css" rel="stylesheet"/>
    <link href="__CSS__/right.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__INC__/form/css/zebra_form.css" type="text/css">
    <link rel="stylesheet" href="__CSS__/ui/jquery.ui.all.css">
    <script src="__JS__/jquery-1.7.2.min.js"></script>
    <script src="__JS__/ui/jquery.ui.core.js"></script>
    <script src="__JS__/ui/jquery.ui.widget.js"></script>
    <script src="__JS__/ui/jquery.ui.mouse.js"></script>
    <script src="__JS__/ui/jquery.ui.sortable.js"></script>
    <script src="__JS__/ui/jquery.ui.droppable.js"></script>
    <script src="__JS__/ui/jquery.ui.tabs.js"></script>
    <script src="__JS__/common.js"></script>
    <style>
        .cando .ui-state-default {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 250px;
        }

        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #sortable li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            height: 1em;
        }

        .one {
            background: #fcfcfc;
        }

        #sortable .controls {
            float: right;
            margin-right: 20px;
        }

        #sortable .controls a {
            margin-right: 20px;
        }
    </style>
    <script>
        $(function () {
            $(".cando").sortable().disableSelection();

            var $tabs = $("#tabs").tabs();
            var $tab_items = $("ul:first li", $tabs).droppable({
                accept: ".cando li",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    var $item = $(this);
                    var $list = $($item.find("a").attr("href")).find(".cando");
                    /* 				ui.draggable.hide( "slow");
                     $( this ).appendTo( $list ); */
                    ui.draggable.hide("normal", function () {
                        //$tabs.tabs( "select", $tab_items.index( $item ) );
                        $(this).appendTo($list).show("slow");
                    });
                }
            });

            $("#sortable").sortable({
                placeholder: "ui-state-highlight"
            });
            $("#sortable").disableSelection();
        });
    </script>
</head>
<body>
<!--右侧区域 begin-->
<div class="right">
    <!--当前位置 begin-->
    <include file='common:crumbs'/>
    <!--当前位置 end-->
    <!--主体区域 begin-->
    <div class="container">
        <div class="alert_div">
            <h4 class="alert_info"><span class="welcome">{$welcome}</span>您现在的位置是：{$current} </h4>
            <h4 class="alert_what" style="display:none;"></h4>
        </div>
        <!--样式三 begin-->
        <div class="stats">
            <div class="lm_title">
                <div class="lm_title_l"><em>{$current}</em></div>
            </div>
            <div class="lm_content">
                <div class="demo" style="padding:10px;">
                    <ul id="sortable">
                        {$topnav2}
                    </ul>
                </div>
                <table class="Zebra_Form" style="width:100%;text-align: center;">
                    <tr>
                        <td>
                            <input type="button" value="添加导航" onclick="javascript:location.href='__GROUP__/nav/navadd' " class="button"/>&nbsp;&nbsp;&nbsp;
                            <input type="button" value="保存顺序" onclick="savenav()" class="button"/>&nbsp;&nbsp;&nbsp;
                            <input type="button" value="管理功能模块" onclick="javascript:location.href='__URL__/modulemanage'" class="button"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="lm_bottom">
                <div class="lm_bottom_l"><em></em></div>
            </div>
        </div>
        <!--样式三 end-->
    </div>
    <!--主体区域 end-->
</div>
<!--右侧区域  end-->
<!--弹出层二begin-->
<div class="popupPanel">
    <div class="stats">
        <div class="lm_title">
            <div class="lm_title_l"><em id="panelTitle">做什么？</em></div>
        </div>
        <div class="lm_content">
            <table class="Zebra_Form" style="width:100%;">
                <tr class="row">
                    <td width="60"><label>已选ID：</label></td>
                    <input type="hidden" id="controlitems" value="" />
                    <input type="hidden" id="panelaction" value="" />
                    <td colspan="2" id="checked_items"><label style="color:#FF00AE;"></label></td>
                </tr>
                <tr class="row">
                    <td></td>
                    <td><input type="button" onclick="panelDo()" class="button" value="确定"/></td>
                    <td><input type="button" class="button" onclick="panelClose()" value="取消"/></td>
                </tr>
            </table>
        </div>
        <div class="lm_bottom">
            <div class="lm_bottom_l"><em></em></div>
        </div>
    </div>
</div>
<!--弹出层二end-->
</body>
<script>
    function savenav() {
        topjson = '';
        var top = $("#sortable li");
        top.each(function (index) {
            var temp = '';
            var id = $(this).attr('_id');
            temp = "{'id':'" + id + "','order':'" + index + "'},";
            topjson += temp;
        });
        topjson = "[" + topjson + "]";
        topjson = eval(topjson);

        $.post("{:U('ajax/navajax')}", {'action': 'toporder', 'data': topjson}, function (data) {
            if (data != 1) {
                jl_notify(2, '呜呜，保存排序失败！');
                //location.href=location.href;
            } else {
                //alert("保存成功！");
                jl_notify(1, '嘻嘻，保存排序成功！');
                //$(".alert_success").fadeIn(300).delay(2000).fadeOut(400);
            }
        });
    }

    //开启panel窗口
    function openpanel(act, item) {
        //初始化关闭所有附加panel
        if (item === undefined || typeof(item) == 'undefined') {
            item = getSelects();
        }
        if (item == '') {
            jl_notify(3, "你没有选中任何项！");
            return;
        }
        $("#controlitems").val(item);
        $('#checked_items label').text(item);
        if (act == 'navdel') {
            $.post("__GROUP__/ajax/navdeleteable", {items: item}, function (data) {
                if (data == -1) {
                    jl_notify(3, "该导航下存在功能模块，不能删除！");
                    return;
                } else if (data == 1) {
                    $("#panelTitle").text("你确定要删除该导航？");
                    $("#panelaction").val("navdel");
                    var obj = $('.popupPanel');
                    jl_fadeIn(obj);
                } else {
                    jl_notify(2, "呜呜，种种原因你不能删除该导航！");
                    return;
                }
            });
        } else {
            jl_notify(3, "不知道你到底要干什么！");
            return;
        }
    }

    //关闭panel窗口
    function panelClose() {
        var obj = $('.popupPanel');
        jl_fadeOut(obj);
    }

    //panel执行操作
    function panelDo() {
        var act = $("#panelaction").val();
        if (act == '') {
            jl_notify(3, "不知道你到底要干什么！");
            return;
        }
        if (act == 'navdel') {
            jl_fadeOut($('.popupPanel'));
            var items = $("#controlitems").val();
            location.href = "__GROUP__/nav/navdel?id=" + items;
        } else {
            jl_notify(3, "不知道你到底要干什么！");
            return;
        }
    }
</script>
</html>